import React, { useState, useEffect } from 'react';
import { Row, Col, Card, Statistic, Progress } from 'antd';
import { ContainerOutlined, FileImageOutlined, DatabaseOutlined } from '@ant-design/icons';
import axios from 'axios';

const Dashboard = () => {
  const [stats, setStats] = useState({
    containers: { total: 0, running: 0 },
    images: { total: 0 },
    system: {
      memoryTotal: 0,
      cpuCores: 0
    }
  });

  useEffect(() => {
    fetchSystemStats();
    const interval = setInterval(fetchSystemStats, 5000);
    return () => clearInterval(interval);
  }, []);

  const fetchSystemStats = async () => {
    try {
      const response = await axios.get('/api/system/usage');
      setStats(response.data);
    } catch (error) {
      console.error('获取系统统计失败:', error);
    }
  };

  const memoryGB = (stats.system.memoryTotal / (1024 * 1024 * 1024)).toFixed(1);

  return (
    <div>
      <h1>仪表盘</h1>
      <Row gutter={[16, 16]} style={{ marginTop: 16 }}>
        <Col xs={24} sm={12} lg={8}>
          <Card>
            <Statistic
              title="运行中的容器"
              value={stats.containers.running}
              prefix={<ContainerOutlined />}
              suffix={`/ ${stats.containers.total}`}
            />
          </Card>
        </Col>
        <Col xs={24} sm={12} lg={8}>
          <Card>
            <Statistic
              title="镜像总数"
              value={stats.images.total}
              prefix={<FileImageOutlined />}
            />
          </Card>
        </Col>
        <Col xs={24} sm={12} lg={8}>
          <Card>
            <Statistic
              title="CPU核心数"
              value={stats.system.cpuCores}
              prefix={<DatabaseOutlined />}
            />
          </Card>
        </Col>
      </Row>

      <Row gutter={[16, 16]} style={{ marginTop: 16 }}>
        <Col xs={24} lg={12}>
          <Card title="系统信息">
            <p>架构: {stats.system.architecture}</p>
            <p>操作系统: {stats.system.os}</p>
            <p>内核版本: {stats.system.kernelVersion}</p>
            <p>服务器版本: {stats.system.serverVersion}</p>
            <p>总内存: {memoryGB} GB</p>
          </Card>
        </Col>
        <Col xs={24} lg={12}>
          <Card title="容器状态分布">
            <div style={{ marginBottom: 16 }}>
              <span>运行中: {stats.containers.running}</span>
              <Progress 
                percent={stats.containers.total ? Math.round((stats.containers.running / stats.containers.total) * 100) : 0} 
                size="small" 
                strokeColor="#52c41a"
              />
            </div>
            <div>
              <span>已停止: {stats.containers.total - stats.containers.running}</span>
              <Progress 
                percent={stats.containers.total ? Math.round(((stats.containers.total - stats.containers.running) / stats.containers.total) * 100) : 0} 
                size="small" 
                strokeColor="#ff4d4f"
              />
            </div>
          </Card>
        </Col>
      </Row>
    </div>
  );
};

export default Dashboard;
